<template>
	<view class="page-container pb-0 bg-grey">
		<up-navbar safeAreaInsetTop fixed placeholder bgColor="transparent" :autoBack="true"></up-navbar>
		<image :src="imgBaseUrl + 'promotion-collection-header.png'" class="collection-header" />
		<view class="plr-24 pos-rel h-200 pt-48">
			<view class="flex-a">
				<image :src="imgBaseUrl + 'avatar.png'" class="user-avatar" />
				<view class="ml-16 flex-1">
					<view class="space-between flex-a">
						<view class="fs-32 font-bold flex-a c-white">
							<text>小乖吃喝玩乐记</text>
							<image :src="imgBaseUrl + 'arrow-right-white.png'" class="icon-28 ml-8" />
						</view>
						<view class="contact-btn">
							<image :src="imgBaseUrl + 'icon-call.png'" class="icon-28 mr-8" />
							<text class="c-white">联系</text>
						</view>
					</view>
					<view class="mt-4 c-white-_6">欢迎来到我们的旅行生活。</view>
				</view>
			</view>
		</view>
		<view class="tab-wrap">
			<view class="flex-a h-88 plr-24">
				<image :src="imgBaseUrl + 'icon-notice.png'" class="icon-28" />
				<text class="flex-1 ml-8 text-ellipsis c-grey-4e">
					恩施大峡谷超值特价，速来抢购恩施大峡谷超值特价，速来抢购
				</text>
			</view>
			<zjy-tabs :tabs="tabs" :flex="true" :activeId="activeId" @tabClick="handleTabClick" />
		</view>
		<scroll-view
			:scroll-y="true"
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="triggered"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
			@refresherrestore="onRestore"
			@refresherabort="onAbort"
			class="plr-24 pt-24"
			:style="{
				height: scrollViewHeight,
			}"
		>
			<template v-if="listData && listData.length > 0">
				<view v-for="(item, index) in listData" :key="index" class="pb-16">
					<view class="bg-white p-24 radius-16 flex">
						<image
							src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
							class="icon-208 radius-16"
							mode="aspectFill"
						/>
						<view class="ml-20 pos-rel flex-1 flex-col space-between">
							<view>
								<view class="text-2-ellipsis fs-28 font-bold">
									恩施大峡谷+腾龙洞景区+东湖磨山景区+武汉大学武汉武汉大学
								</view>
								<view class="flex-a mt-8">
									<image :src="imgBaseUrl + 'icon-loc.png'" class="icon-28" />
									<text class="c-grey-86 ml-4">西岛海洋文化旅游区</text>
								</view>
							</view>
							<view class="c-red font-bold">
								<text class="fs-20">&yen;</text>
								<text class="font-oppo fs-32">122</text>
								<text>起</text>
							</view>
						</view>
					</view>
				</view>
			</template>
			<zjy-empty emptyText="暂无数据" v-else-if="!freshing && searched"></zjy-empty>
		</scroll-view>
	</view>
</template>
<script setup lang="ts">
import useCommonStore from "@/store/common"
import type { ZjyTabItem } from "@/types/common"
import { freshLoading } from "@/utils/fresh-loading"

const commonStore = useCommonStore()
const imgBaseUrl = inject("imgBaseUrl")
const tabs = ref<ZjyTabItem[]>([
	{
		id: "0",
		name: "全部",
	},
	{
		id: "1",
		name: "景区门票",
	},
	{
		id: "2",
		name: "旅游线路",
	},
	{
		id: "3",
		name: "度假酒店",
	},
])
const activeId = ref("0")
const scrollViewHeight = `calc(100vh - ${commonStore.statusBarHeight + commonStore.navbarHeight}px - 376rpx)`
const searched = ref(false)

const handleTabClick = (id: string) => {
	activeId.value = id
}

//#region 初始化下拉刷新
const freshLoadingRef = freshLoading()
let {
	loadMore,
	triggered,
	onPulling,
	onRefresh,
	onRestore,
	onAbort,
	getListData,
	listData,
	freshing,
	getListSuccessCallback,
} = freshLoadingRef
freshLoadingRef.listService.value = null
getListSuccessCallback.value = () => {
	searched.value = true
}
freshLoadingRef.listData.value.push(...[1, 2])
//#endregion
</script>
<style lang="scss" scoped>
.collection-header {
	position: absolute;
	top: 0;
	width: 100%;
	height: 460rpx;
}
.contact-btn {
	height: 48rpx;
	padding: 0 18rpx;
	background: rgba(255, 255, 255, 0.1);
	border: 1rpx solid rgba(255, 255, 255, 0.2);
	border-radius: 32rpx;
	display: flex;
	align-items: center;
}
.tab-wrap {
	position: relative;
	background: $c-white;
	border-radius: 32rpx 32rpx 0 0;
}
</style>
